<template>
	<view class="container" @scroll="onPageScroll">
		<!-- {{curUrl}} -->
		<!-- <Page :items="items" /> -->
		<view class="header cover">
			<img class="banner" :src="infrom.live_cover">
		</view>
		<view class="title page">
			<text class="ellipsis2">{{ infrom.title }}</text>
			<view class="status_row">
				<view class="status">直播中</view>
				<view class="views">{{ infrom.real_view_count }} <text>热度</text></view>
				<view class="detail" @click="details">
					<text>活动详情</text><i class="piciconfont icon-gengduo"></i>
				</view>
			</view>
		</view>
		<view class="tab_area" :class="{ 'show': show }">

			<view class="pic_tab">
				<u-tabs :list="list" :is-scroll="false" :current="current" @change="change"></u-tabs>
				<view class="sort">
					<view>
						<img src="../../static/order-jx.png" alt="">
					</view>
					<view>
						<img src="../../static/order-sx.png" alt="" v-if="sort" @click="onSort">
						<img src="../../static/order-jx.png" v-else alt="" @click="onSort">
					</view>
					<view>

						<img src="../../static/grid-no.png" alt="" @click="onToggleShow">
					</view>


				</view>

			</view>

			<view :class="{ 'drop_menu': true, 'show': show }">
				<view class="sort_row">
					<view :class="{ 'on': sort }" @click="onSort">
						<img src="../../static/order-jx.png" alt="" v-if="sort">
						<img src="../../static/order-j.png" alt="" v-else>
						<p>正序</p>
					</view>
					<view :class="{ 'on': !sort }" @click="onSort">
						<img src="../../static/order-s.png" alt="" v-if="sort">
						<img src="../../static/order-sx.png" alt="" v-else>

						<p>倒序</p>
					</view>
				</view>
				<view class="list_style">
					<view class="on">
						<img src="../../static/grid-yes.png" alt="" v-if="sortOrder">
						<img src="../../static/grid-no.png" alt="" v-else>
						<p>宫格</p>
					</view>
					<view class="">
						<img src="../../static/tiem-no.png" alt="" v-if="sortOrder">
						<img src="../../static/tiem-yes.png" alt="" v-else>
						<p>时间轴</p>
					</view>
				</view>
			</view>

			<section class="pic_type">
				<view :class="{ 'type_item': true, 'on': item.id == curId }" v-for="item in categoryList"
					@click="tabSwitch(item.id)" :key="item.id">{{ item.name }}</view>
			</section>
		</view>

		<view class="list_wrapper" id="pic-live-list-wrapper">
			<u-lazy-load :class="{ 'flex-s': true, 'check_btn': isXz, 'xz': seleList.includes(item.id) }" class="flex-s"
				v-for="(item, index) in  lists " :key="index" :image="item.url" @click="preview(item, index)">
			</u-lazy-load>

			<!-- 	<view class="flex-s" v-for="(item, index) in  lists " :key="index" :image="item.url">
				<u-lazy-load threshold="-450" border-radius="10" :image="item.url" :index="index"></u-lazy-load>
				<view class="check_area g_full" v-if="!isCartEdit">
					<i class="check_btn"></i>
				</view>
			</view> -->
			<view class="shadow" v-if="show"></view>
		</view>

		<!-- <view class="list WaterFall">
			<u-time-line>
				<h3>2024-01-19</h3>
				<u-time-line-item nodeTop="2">

					<template v-slot:content>
						<view>
							<u-waterfall v-model="lists" ref="uWaterfall">
								<template v-slot:left="{ leftList }">
									<view :class="{ 'demo-warter': true }" v-for="(item, index) in leftList" :key="index">
										
										<u-lazy-load threshold="-450" border-radius="10" :image="item.file_path"
											:index="index"></u-lazy-load>

									

									</view>

								</template>
								<template v-slot:right="{ rightList }">
									<view :class="{ 'demo-warter': true }" v-for="(item, index) in rightList" :key="index">
										<u-lazy-load threshold="-450" border-radius="10" :image="item.file_path"
											:index="index"></u-lazy-load>
									
									</view>

								</template>
							</u-waterfall>
						</view>
					</template>
				</u-time-line-item>

			</u-time-line>
			<view class="shadow" v-if="show"></view>
		</view> -->

		<view class="load_all">- 已经到底了哦 -</view>




		<!-- 悬浮球 -->
		<view id="right_bar" v-show="!isXz" class="">
			<view :class="{ 'open': isShow, 'fold_list': true }" :style="dynamicStyle">
				<view class="tool_wrap" v-if="isShow">
					<view class="icon_item" @click="cart">
						<u-icon name="shopping-cart" color="#2979ff" size="36"></u-icon>
						<view>购物车</view>
					</view>
					<view class="icon_item"><u-icon name="download" color="#2979ff" size="36" @click="isXz = true"></u-icon>
						<view>下载</view>
					</view>
					<view class="icon_item" @click="isShare = true"><u-icon name="share" color="#2979ff" size="36"></u-icon>
						<view>分享</view>
					</view>
					<view class="icon_item"><u-icon name="shopping-cart" color="#2979ff" size="36"></u-icon>
						<view>找人</view>
					</view>
					<view class="icon_item"><u-icon name="account" color="#2979ff" size="36"
							@click="isInform = true"></u-icon>
						<view>我的</view>
					</view>
				</view>
				<view class="fix_btn" @click="fn">
					<u-icon name="arrow-up" color="#2979ff" size="32"></u-icon>
				</view>
			</view>
		</view>

		<!-- 购物车弹框 -->
		<u-popup v-model="isCart" mode="bottom" width="500rpx" height="760rpx" border-radius="34">
			<view class="cart_box">
				<view class="header">
					<h1>购物车</h1>
					<p class="action" @click="isCartEdit = !isCartEdit" v-if="isCartEdit">管理</p>
				</view>
				<view class="list_header" v-if="cartList.length">
					<text>图片<text>{{ cartList.length }}</text></text>张
				</view>
				<scroll-view scroll-y="true" style="height: 460rpx;">
					<view class="list_wrappers " v-if="cartList.length">
						<view class="list_img image-container">
							<view :class="{ 'active': selectedImages.includes(item.id) }" v-for="(item, index) in cartList"
								:key="item.url" @click="toggleSelectImage(item.id)">
								<img :src="item.url" mode=""></img>
							</view>
						</view>
					</view>

					<view class="empty_tip" v-else>空空的购物车</view>
				</scroll-view>
				<view class="footer" v-if="isCartEdit">
					<view class="price">
						<text class="sum"><text>总金额</text><var>￥{{ total_price }}</var></text>
						<view class="detail"><text><i>图片总价</i>
								￥{{ total_price }}</text></view>
					</view>
					<button class="pay">立即支付</button>
				</view>
				<view class="footer" v-else>
					<u-checkbox-group @change="handleClick">
						<u-checkbox v-model="checked" shape="circle">全选</u-checkbox>
					</u-checkbox-group>
					<button class="control" @click="backRet">返回</button>
					<button class="control del" @click="deleteCart">删除</button>
				</view>
			</view>
		</u-popup>

		<!-- 活动详情 -->
		<u-popup v-model="isDetails" mode="bottom" width="500rpx" height="320rpx" border-radius="34">
			<view class="introduce g_scroll">
				<view class="title popup">
					<h1 class="ellipsis2">{{ infrom.title }}</h1>
					<view class="status_row">
						<view class="status">直播中</view><var class="views">{{ infrom.real_view_count }}<span>热度</span></var>
					</view>
				</view>
				<view class="info"></view>
				<view class="complain"><a
						href="/live/WXComplaint?ctype=0&amp;id=1371199656&amp;v=1708394007221&amp;fr=">举报反馈</a></view>
			</view>
		</u-popup>


		<!-- 照片详情 -->
		<Details :list='lists' :current='index' @close="isDeta = false" :show="isDeta" :live_id='live_id' />


		<!-- 人脸 -->
		<u-popup v-model="recognition" mode="bottom" width="500rpx" height="1220rpx" border-radius="34">
			<view id="face_popup">

				<view class="line"></view>
				<h1>人脸识别</h1>
				<h2>上传TA的脸部图片，快速找到他的身影</h2>
				<h2 style="color: transparent; display: none;">请输入要查找的号码，快速找到他的身影</h2>
				<section class="veriface_wrap">
					<view class="veriface_pic init"><img class="face"
							src="https://j1.weizan.cn/live-statics/livepage/live-static/img/face-default.39e83f04.png"></img>
						
					</view>
				</section>
				<section class="face_pd">
					<h3>温馨提示：建议上传单人正面照片，非正面角度或人物偏小会影响匹配精准度。照片大小建议不超过10M。</h3>
					<view class="upload" @click="findNow"><img class="face"
							src="../../static/xj.png"></img>
						立即上传</view>
				</section>
				<view class="agree_row agree">
					<u-checkbox-group>
						<u-checkbox shape="circle" v-model="value"></u-checkbox>
					</u-checkbox-group>
					<p>我已阅读并同意</p><span>《人脸识别使用条款》</span>
				</view>
				<view class="num-recognition-wrap" style="display: none;"><input type="text" maxlength="20"
						placeholder="请输入要查找的号码，支持数字、字母、汉字" class="num-recognition-input">
					<view class="num-recognition-btn" >开始查找</view>
				</view>
			</view>

			<scroll-view scroll-y="true" style="height: 0rpx;">


			</scroll-view>
		</u-popup>
		<footer class="check_footer" v-if="isXz">
			<p class="down-tips"> 付费明细: 单张图片5.00元，总共选中1张，已包含可免费下载0张 </p>
			<div class="row g_max">
				<div class="cancel" @click="isXz = false"><u-icon name="close" size="28"></u-icon>取消</div>
				<div class="d-flex btn-wrap-outer">
					<div class="free-download"><!---->
						<div class="btn-down" @click="freeDownload">
							<p class="btn-text">免费下载</p>
							<p class="sub-text">有水印</p>
						</div>
					</div>
					<div class="pay-download">
						<div class="btn-down">
							<p class="btn-text">共5.00元</p>
							<p class="sub-text">高清无水印原图</p>
						</div>
					</div>
				</div>
			</div><!----><!---->
		</footer>
		<u-popup v-model="isInform" mode="bottom" width="600rpx" border-radius="34">
			<view class="cart_box">
				<view class="header">
					<h1>我的</h1>
					<!-- <p class="action" @click="isCartEdit = !isCartEdit" v-if="isCartEdit">管理</p> -->
				</view>
				<u-collapse>
					<u-collapse-item title="已购" :open="true">
						<!-- 1212 -->
						<scroll-view scroll-y="true" style="height: 460rpx;">
							<view class="list_wrappers " v-if="myPhotoList.length">
								<!-- 	<view class="list_img image-container">
										<view  v-for="(item, index) in cartList"
											:key="item.url" >
											<img :src="item.url" mode=""></img>
										</view>
									</view> -->
								<view class="list_img image-container2">
									<u-image width="100%" height="200rpx" v-for="(item, index) in myPhotoList"
										:src="item.url"></u-image>

								</view>
							</view>

							<view class="empty_tip" v-else>暂无数据</view>
						</scroll-view>
					</u-collapse-item>
					<u-collapse-item title="打赏">
						<scroll-view scroll-y="true" style="height: 460rpx;">
							<u-table>
								<u-tr>
									<u-th>打赏名称</u-th>
									<u-th>打赏金额</u-th>
									<!-- <u-th>时间</u-th> -->
								</u-tr>
								<u-tr v-for="(item, index) in rewardList" :key="item.order_no">
									<u-td>{{ item.remark }}</u-td>
									<u-td>{{ item.amount }}</u-td>
									<!-- <u-td>{{dateFormat(item.add_time)}}</u-td> -->
								</u-tr>

							</u-table>
						</scroll-view>
						<!-- <view class="list_wrappers " v-if="cartList.length">
								<view class="list_img image-container">
									<view :class="{ 'active': selectedImages.includes(item.id) }" v-for="(item, index) in cartList"
										:key="item.url" @click="toggleSelectImage(item.id)">
										<img :src="item.url" mode=""></img>
									</view>
								</view>
							</view> -->
					</u-collapse-item>
				</u-collapse>
				<!-- 	<view class="list_header" v-if="cartList.length">
					<text>图片<text>{{ cartList.length }}</text></text>张
				</view> -->
				<!-- 	<scroll-view scroll-y="true" style="height: 460rpx;">
					<view class="list_wrappers " v-if="cartList.length">
						<view class="list_img image-container">
							<view :class="{ 'active': selectedImages.includes(item.id) }" v-for="(item, index) in cartList"
								:key="item.url" @click="toggleSelectImage(item.id)">
								<img :src="item.url" mode=""></img>
							</view>
						</view>
					</view>

					<view class="empty_tip" v-else>空空的购物车</view>
				</scroll-view> -->

			</view>
		</u-popup>

		<share :show='isShare' @close="isShare = false" :infrom='infrom'></share>


		<u-mask :show="isCode" :duration="400" :zoom="true" :custom-style="{ background: 'transparent' }"
			@click="getCode"></u-mask>
	</view>
</template>

<script>
import {
	setCartTabBadge
} from '@/core/app'
import * as Api from '@/api/page'
import Page from '@/components/page'
import Details from '@/components/details'
import store from '@/store'
import share from '@/components/share'
import * as Get from '@/api/photo'
import storage from '@/utils/storage'

const App = getApp()

export default {
	components: {
		Page,
		Details,
		share,

	},
	data() {
		return {
			sortOrder: true,
			isCode: true,

			isInform: false,
			// 打赏列表
			rewardList: [],


			isShare: false,
			isXz: false,
			isDeta: false,
			checked: false,
			value: '1',
			recognition: false,
			// 页面参数
			options: {},
			// 页面属性
			page: {},
			// 页面元素
			items: [{
				name: "全部"
			},
			{
				name: "全部"
			}
			],
			list: [{
				name: '图片直播'
			}],
			current: 0,
			// 分类列表
			categoryList: [{
				name: "全部",
				id: 1
			},
				// {
				// 	name: "全部",
				// 	id: 2
				// }
			],
			// 图片列表
			lists: [],
			seleList: [],
			index: 0,

			// 弹窗显示控制
			isShow: false,
			transparent: true,
			right: 0,
			bottom: 0,
			curHeight: 80,


			show: false,



			sort: true,

			// 活动详情
			isDetails: false,

			// 购物车
			isCart: false,
			cartList: [],
			selectedImages: [],
			isCartEdit: true,
			total_price: '',
			curId: '0',
			// 基础信息
			infrom: {

			},
			live_id: '',
			fromData: {
				live_id: '', //直播间id
				page: '', //页码
				limit: '', //页大小
				category_id: '0', //分类id

			},
			curUrl: '',
			
			// 已购列表
			myPhotoList:[]
		}
	},
	computed: {

		// 使用计算属性来创建动态样式对象
		dynamicStyle() {
			return {
				height: this.curHeight + 'rpx',
				// color: this.color
			};
		}
	},

	/**
	 * 生命周期函数--监听页面加载
	 */
	onLoad(options) {
		// 当前页面参数
		this.options = options
		const launchOptions = uni.getLaunchOptionsSync();
		const query = launchOptions.query;
		this.curUrl = location;
		this.fromData.live_id = query.live_id || '';
		this.live_id = query.live_id || '';
		this.code = query.code || '';
		this.onGetSetting();

		// 加载页面数据
		// this.getPageData();
		const userId = storage.get('USER_ID')
		const wxOpenid = storage.get('WX_OPENID')
		console.log(userId, "userId")
		console.log(wxOpenid, "wxOpenid")
		if (userId && wxOpenid) {
			store.getters.wxOpenid = wxOpenid;
			store.commit('SET_USER_ID', userId)
			this.isCode = false;
		}
		if (!userId || !wxOpenid) {
			if (query.code) {
				this.getWxUserInfo(query.code);
			}
		}


		if (store.getters.wxOpenid && userId) {
			this.onGetPhotoList();

			this.onGetCategory();


			// 购物车
			this.onCartList();

			this.getmyReward();
		}



		console.log(this.live_id, "live_id")
		console.log(query, "query")
	},

	/**
	 * 生命周期函数--监听页面显示
	 */
	onShow() {
		// 更新购物车角标
		setCartTabBadge()
	},

	methods: {
		getWxUserInfo(code) {
			// 过期时间30天
			const expiryTime = 30 * 86400
			// console.log('拿到code了',code)
			// this.$toast('拿到code了')
			// 获取wx用户信息
			Get.getWxUserInfo({ code: code }).then(res => {
				console.log(res, "store3434")
				console.log(store, "store")
				// 记录到store全局变量
				store.commit('SET_USER_ID', res.data.user_id)
				store.getters.wxOpenid = res.data.openid;

				storage.set('USER_ID', res.data.user_id, expiryTime);
				storage.set('WX_OPENID', res.data.openid, expiryTime);
				// console.log(store.getters,"store.getters","23232")
				this.onGetPhotoList();

				this.onGetCategory();


				// 购物车
				this.onCartList();

				this.getmyReward();


				// console.log(res,"res123")
			})
		},

		onCartList() {

			const app = this;
			Get.cartList({
				live_id: app.live_id,
				type: 'photo_live'
			})
				.then(res => {
					app.cartList = res.data.list;
					app.total_price = res.data.total_price;
					console.log(res, "res2")
					// app.infrom = res.data || {};
					// console.log(app.infrom,"result")
				})
		},


		onGetSetting() {
			const app = this
			// uni.request({
			//     url: 'https://adminapi.pourfirst.cn/h5/index/getSetting', //仅为示例，并非真实接口地址。
			// 	method:'POST'
			// 	,
			//     data: {
			//         text: 'uni.request'
			//     },
			//     header: {
			//     },
			//     success: (res) => {
			//         console.log(res.data);
			//         this.text = 'request success';
			//     }
			// });
			if (this.code) {
				this.isCode = false;
			}
			Get.getSetting({
				live_id: app.live_id
			})
				.then(res => {
					// console.log(res,"res")
					app.infrom = res.data || {};


					// console.log(app.infrom,"result")
				})

		},
		getCode() {
			// 获取code
			const app = this;
			console.log(app.infrom.oauth2_url, "app.infrom.oauth2_url")
			let a = document.createElement('a');
			a.href = app.infrom.oauth2_url; // 设置跳转链接
			a.target = '_self'; // 在新标签页中打开链接
			location.href = a.href;

			// 将a标签添加到页面中
			// document.body.appendChild(a);

			// 模拟点击a标签
			// a.click();

			// 点击后移除a标签
			// document.body.removeChild(a);
			// uni.navigateBack({
			//   delta: 1, // 关闭当前页面
			//   // success() {
			//   //   uni.navigateTo({
			//   //     url:  a.href // 打开新页面的路径
			//   //   });
			//   // }
			// });
			// a.click();
			// document.body.removeChild(a);
			// uni.navigateTo({
			//   url: `${app.infrom.oauth2_url}`
			// });

			// app.infrom.oauth2_url
		},
		onGetPhotoList() {
			// 照片列表
			const app = this;
			Get.getPhotoList(app.fromData)
				.then(res => {
					console.log(res, "res")
					app.lists = res.data.list || [];
				})
		},
		onGetCategory() {
			const app = this;
			Get.getCategory({
				live_id: app.live_id
			}).then(res => {
				app.categoryList = res.data;
				app.categoryList.unshift({
					id: 0,
					name: '全部'
				})
			})
		},

		tabSwitch(id) {
			const app = this;
			app.curId = id;
			app.fromData.category_id = id;
			this.onGetPhotoList();
		},
		cart() {
			// 购物车
			const app = this;
			app.isCart = !app.isCart

			this.onCartList();
		},
		details() {
			// 活动详情
			const app = this;
			app.isDetails = !app.isDetails
		},
		onTimeSort() {
			let app = this;
			// const customSort() = (arr, order) => {
			// 	if (order === 'asc') {
			// 		console.log(arr,"arr")
			// 		return arr.sort((a, b) => a.sort - b.sort);
			// 	} 
			// };
			// customSort()
			console.log(customSort(this.lists, 'asc'))
			// 时间排序
			// app.formatTimestamp();
		},
		// 定义一个函数来处理时间戳
		formatTimestamp(timestamp) {
			// 创建一个新的Date对象，将时间戳作为参数传入
			var date = new Date(timestamp);

			// 使用Date对象的方法来获取年、月、日、时、分、秒
			var year = date.getFullYear();
			var month = date.getMonth() + 1; // 月份是从0开始计数的，所以要加1
			var day = date.getDate();
			var hours = date.getHours();
			var minutes = date.getMinutes();
			var seconds = date.getSeconds();

			// 将获取到的时间信息拼接成想要的格式
			var formattedDate = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;

			return formattedDate;
		},



		onSort() {
			const app = this
			// ES6 冒泡排序函数
			const customSort = (arr, order) => {
				if (order === 'asc') {
					return arr.sort((a, b) => a.sort - b.sort);
				} else if (order === 'desc') {
					return arr.sort((a, b) => b.sort - a.sort);
				} else {
					return 'Invalid order. Please use "asc" for ascending or "desc" for descending order.';
				}
			};




			app.sort = !app.sort
			if (app.sort) {
				this.lists = customSort(this.lists, 'asc')
				console.log(this.lists, "this.lists")
			} else {
				this.lists = customSort(this.lists, 'desc')
				console.log(this.lists, "this.lists2")
			}



		},
		onPageScroll(event) {
			const app = this

			// 在这里处理滚动事件，event.detail.scrollTop为滚动距离
			app.show = false
			console.log('滚动距离：', event.scrollTop);
		},
		fn() {
			const app = this

			app.isShow = !app.isShow
			if (app.isShow) {
				app.curHeight = 490
			} else {
				app.curHeight = 80
			}

			app.transparent = false
		},
		onToggleShow() {
			const app = this
			app.show = !app.show;
			// app.isShow = !app.isShow
			// app.transparent = false
		},
		change() {

		},
		// 购物车
		toggleSelectImage(id) {
			if (this.isCartEdit) return
			if (this.selectedImages.indexOf(id) > -1) {
				this.selectedImages = this.selectedImages.filter(item => item != id);
			} else {
				this.selectedImages.push(id);
			}
			if (this.cartList.length == this.selectedImages.length) {
				this.checked = true;
			} else {
				this.checked = false;
			}
		},
		// 编辑
		backRet() {
			this.selectedImages = [];
			this.isCartEdit = true;

		},
		// 全选
		handleClick() {

			if (this.cartList.length <= this.selectedImages.length) {
				this.selectedImages = []
			} else {
				this.cartList.map((item, index) => {
					console.log(index)
					this.selectedImages.push(item.id)
				})
			}



		},

		deleteCart() {
			console.log(this.selectedImages, "this.selectedImages")
			let ids = this.selectedImages.join(',');
			if (this.selectedImages.length == 0) {
				return this.$toast('请选择要删除的数据')
			}
			console.log(ids, "this.selectedImages")
			Get.deleteCart({
				live_id: this.live_id,
				ids: ids
			}).then(res => {
				if (res.code == 1) {
					this.$toast('删除成功')
					this.onCartList();
				}

				console.log(res, "res")
			})

		},

		preview(item, index) {
			if (this.isXz) {
				if (this.seleList.indexOf(item.id) > -1) {
					this.seleList = this.seleList.filter(item1 => item1 != item.id);
				} else {
					this.seleList.push(item.id);
				}
			} else {

				this.index = index;
				this.isDeta = true;
			}

			// this.lists.map((item1, index1) => {
			// 	// console.log(index)
			// 	this.seleList.push(item1.id)
			// })
			// console.log(this.seleList, "item1")


			// this.index = index;
			// this.isDeta = true;
			console.log(index, "index")
		},

		// 打赏列表
		getmyReward() {
			// 已购
			Get.getmyPhoto({ live_id: this.live_id, page: 1 }).then(res => {
				this.myPhotoList = res.data || [];
				// myPhotoList
			})
			// 打赏列表
			Get.getmyReward({ live_id: this.live_id, page: 1 }).then(res => {
				console.log(res, "res34")
				this.rewardList = res.data || [];
				console.log(res, "res34")
			})
		},


		// 免费下载图片
		freeDownload() {
			let ids = this.seleList.join(',')
			Get.getFreePhotoList({live_id:13,ids:ids}).then(result=>{
				// console.log(res.data)
				let data = result.data;
				// 获取图片链接数组
				    // let imageUrls = ['https://example.com/image1.jpg', 'https://example.com/image2.jpg', 'https://example.com/image3.jpg'];
					
				    // 循环遍历图片链接数组
				    data.forEach((item, index) => {
						console.log(item.url,"item.url")
				        uni.downloadFile({
				            url: item.url,
				            success: (res) => {
								
				                if (res.statusCode === 200) {
				                    // 保存图片到相册
				                    uni.saveImageToPhotosAlbum({
				                        filePath: res.tempFilePath,
				                        success: () => {
				                            console.log('第' + (index + 1) + '张图片保存成功');
				                        },
				                        fail: (error) => {
				                            console.log('第' + (index + 1) + '张图片保存失败', error);
				                        }
				                    });
				                }
				            },
				            fail: (error) => {
				                console.log('下载图片失败', error);
				            }
				        });
				    });
			
			
			})
		},
		/**
		 * 加载页面数据
		 * @param {Object} callback
		 */
		getPageData(callback) {
			const app = this
			const pageId = app.options.pageId || 0
			Api.detail(pageId)
				.then(result => {
					// 设置页面数据
					const {
						data: {
							pageData
						}
					} = result
					app.page = pageData.page
					app.items = pageData.items
					// 设置顶部导航栏栏
					// app.setPageBar();
				})
				.finally(() => callback && callback())
		},
		findNow() {
			uni.chooseImage({
				count: 1,  // 图片数量，这里设置为6
				sizeType: ['original', 'compressed'], // 指定选择的图片类型，可以选择原图和压缩图，这里设置为二者都有
				sourceType: ['album', 'camera'], // 指定选择图片的来源，这里设置为相册和相机
				success: (res) => {
					console.log(res.tempFiles, "res.tempFiles")
					Get.faceSearchPhoto({}).then(result=>{
						
					})
					// this.images.push(res.tempFilePaths);
				},
				fail: (err) => {
					console.log('选择图片失败', err);
				}
			});

		},
		/**
		 * 设置顶部导航栏
		 */
		setPageBar() {
			const {
				page
			} = this
			// 设置页面标题
			uni.setNavigationBarTitle({
				title: page.params.title
			});
			// 设置navbar标题、颜色
			uni.setNavigationBarColor({
				frontColor: page.style.titleTextColor === 'white' ? '#ffffff' : '#000000',
				backgroundColor: page.style.titleBackgroundColor
			})
		},

	},

	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		// 获取首页数据
		// this.getPageData(() => {
		// 	uni.stopPullDownRefresh()
		// })
	},

	/**
	 * 分享当前页面
	 */
	onShareAppMessage() {
		const app = this
		const {
			page
		} = app
		return {
			title: page.params.share_title,
			path: "/pages/index/index?" + app.$getShareUrlParams()
		}
	},

	/**
	 * 分享到朋友圈
	 * 本接口为 Beta 版本，暂只在 Android 平台支持，详见分享到朋友圈 (Beta)
	 * https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/share-timeline.html
	 */
	onShareTimeline() {
		const app = this
		const {
			page
		} = app
		return {
			title: page.params.share_title,
			path: "/pages/index/index?" + app.$getShareUrlParams()
		}
	}

}
</script>

<style lang="scss" scoped>
.container {
	background: #fff;
	display: flex;
	flex-direction: column;

	.header {
		.banner {
			object-fit: cover;
			width: 100%;
			display: block;
			// height: 240rpx;
		}

	}

	.title {
		padding: 20rpx 26rpx;
		// border-radius: 0.16rem 0.16rem 0 0;
		background: #fff;
		position: relative;
		z-index: 3;
	}

	.ellipsis2 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		word-break: break-all;
		font-size: 38rpx;
		color: #202124;
		font-weight: 700;
		// line-height: .26rem;
	}

	.status_row {
		display: flex;
		align-items: center;
		margin-top: 20rpx;
		// height: 0.2rem;
		color: #919499;

		.status {
			margin-right: 30rpx;
		}



		.detail {
			margin-left: auto;
			display: flex;
			align-items: center;
			cursor: pointer;
		}
	}

	.tab_area {
		background: #fff;
		position: sticky;
		top: 0;
		z-index: 100;
	}

	.tab_area.show {

		top: 0;
		z-index: 400;
	}

	.pic_tab {
		display: flex;
		align-items: center;
		padding: 0 26rpx;
		border-bottom: 1px solid #f5f6f7;
		position: relative;
		z-index: 20;

		.sort {
			margin-left: auto;
			display: flex;
			align-items: center;

			img {
				width: 30rpx;
				height: 30rpx;
				margin-left: 30rpx;
				cursor: pointer;

			}
		}
	}

	.drop_menu {
		padding: 0;
		list-style: none;
		position: absolute;
		right: 0;
		// top: 100%;
		width: 100%;
		background: #fff;
		// background: #919499;
		z-index: 227;
		box-sizing: border-box;
		border-radius: 0 0 54rpx 54rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		transition: height .2s;
		height: 0;
		overflow: hidden;
		padding: 0;

		.sort_row {
			display: flex;
			justify-content: space-between;
			// margin-top: 0.2rem;
			margin: 28rpx 50rpx 0;

			view {
				width: 140rpx;
				height: 80rpx;
				border-radius: 20rpx;
				// border: 1px solid #f5f6f7;
				color: #60646b;
				display: flex;
				align-items: center;
				justify-content: center;
				cursor: pointer;
				box-sizing: border-box;
				font-size: 30rpx;

				img {
					margin-right: 10rpx;
					width: 36rpx;
					height: 36rpx;
				}
			}
		}


		.list_style {
			list-style: none;
			display: flex;
			justify-content: space-between;
			margin: 0 50rpx 30rpx;

			view {
				display: flex;
				flex-direction: column;
				align-items: center;
				cursor: pointer;
			}

			img {
				margin-right: 10rpx;
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 10rpx;
				// height:;
			}
		}
	}

	.drop_menu.show {
		height: 300rpx;
		z-index: 555;
		// height: 1.94rem;
	}

	.pic_type {
		display: inline-flex;
		align-items: center;
		height: 80rpx;
		width: 100%;
		overflow-x: auto;
		flex-shrink: 0;
		// margin: 0 20rpx;
	}

	.pic_type .type_item.on {
		color: #006cff;
	}

	.type_item {
		margin-left: 33rpx;
	}

	.complain {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 120rpx;
		border-top: 6rpx solid #f5f6f7;
		width: 100%;

		a {
			color: #3b97ff;
			cursor: pointer;
			text-decoration: none;
		}
	}

	.list_wrapper .shadow {
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, .3);
		z-index: 188;
		left: 0;
		top: 0;
	}

	// 图片列表
	.list_wrapper {
		position: relative;
		display: flex;
		flex-wrap: wrap;
		padding: 0px 4rpx;
		// padding: 0 0.02rem;
		// position: relative;
		// flex-direction: column;
		// // flex: 1;
		// position: relative;
		// width: calc(33.33333% - 10rpx);
		// padding-top: calc(33.33333% - 10rpx);
		// margin-right: 10rpx;
		// margin-bottom: 14rpx;
		// img {
		// 	width: calc(33.33333% - 10rpx);
		// }

		.list {
			display: flex;
			flex-wrap: wrap;
			padding: 0 0.02rem;
			position: relative;

			.pic_item.nine {
				width: calc(33.33333% - 10rpx);
				height: 140rpx;
				padding-top: calc(33.33333% - 10rpx);
				margin-right: 10rpx;
				margin-bottom: 14rpx;

				img {
					// position: absolute;
					// left: 0;
					// top: 0;
					// width: 100rpx;
					// height: 100rpx;
					width: 100%;
					height: 100%;
				}
			}

			// .pic_item.nine .image {
			// 	position: absolute;
			// 	left: 0;
			// 	top: 0;
			// 	width: 100%;
			// 	height: 100%;
			// }
		}
	}

	.flex-s {
		width: calc(33% - 10rpx);
		height: 160rpx;
		// padding-top: calc(33.33333% - 10rpx);
		margin-right: 10rpx;
		margin-bottom: 14rpx;
	}

	.flex-s:nth-child(3n) {
		margin-right: 0rpx;
	}



	.load_all {
		color: #747474;
		text-align: center;
		padding: 20rpx 0 10rpx;
		font-style: oblique;
		padding-bottom: 300rpx;
	}
}







// 悬浮球
#right_bar {
	position: fixed;
	right: 30rpx;
	bottom: 30rpx;
	z-index: 150;
	width: 100rpx;
	line-height: 1;
	border-radius: 40rpx;
	color: #006cff;
	opacity: 1;
	text-align: center;
	transition: opacity .2s;
}

.fold_list {
	width: 90rpx;
	padding: 4rpx 0;
	border-radius: 80rpx;
	font-size: 32rpx;
	background: linear-gradient(180deg, #ecf4ff, #e6f6ff);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	transition: all .3s;
	box-sizing: border-box;
	// transition: transform 0.3s ease;

}

.icon_item {
	text-align: center;
	margin-bottom: 22rpx;
	margin-top: 22rpx;
	font-size: 28rpx;
	cursor: pointer;
	flex-shrink: 0;
}

.tool_wrap {
	transition: height 0.5s;
	/* 使用过渡效果实现高度变化的动画 */
	overflow: hidden;
	/* 初始时隐藏溢出内容 */
}

.tool_wrap.open {
	height: 260px;
	/* 展开时的高度 */
}

.fix_btn {
	margin-bottom: 22rpx;

}

.fold_list .fix_btn {
	transition: transform 0.3s ease;

}

.open .fix_btn {
	transition: transform 0.3s ease;
	/* 添加过渡动画 */
	transform: rotate(180deg);
}


// 购物车
.cart_box {
	padding: 40rpx;

	.header {
		display: flex;
		align-items: center;
		justify-content: space-between;
		// padding: 30rpx 26rpx;

		h1 {
			font-size: 32rpx;
			font-weight: 600;
			color: #202124;
		}

		p {
			font-size: 26rpx;
			color: #006cff;
		}
	}

	.empty_tip {
		height: 380rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		font-size: 20rpx;
		color: #919499;


	}

	.empty_tip::before {
		content: " ";
		width: 140rpx;
		height: 140rpx;
		background: url(../../static/pic-live-empty.png);
		background-size: 100% 100%;
		margin-bottom: 0.1rem;
	}

	.footer {
		padding: 40rpx;
		border-top: 1px solid #f5f6f7;
		font-size: 20rpx;
		background-color: #fff;
		display: flex;
		align-items: center;
		line-height: 1.6;
		font-size: 26rpx;

		.control {
			width: 240rpx;

			margin-right: 10rpx;
			color: #006cff;
			background-color: rgba(0, 108, 255, .1);
			border-radius: 50rpx;
		}

		.control.del {
			color: #f44;
			background-color: rgba(255, 68, 68, .1);
		}

		.detail {
			font-size: 20rpx;

		}

		.price {
			flex: 1;
			color: #000;
		}

		var {
			color: #f44;
		}

		.pay {
			width: 220rpx;
			height: 90rpx;
			border-radius: 62rpx;
			color: #fff;
			background: linear-gradient(270deg, #006cff, #00a5ff);
			// flex-shrink: 0;
		}
	}
}



// 人脸样式
#face_popup {
	height: 100%;
	// height: 5.85rem;
	padding-bottom: 0.15rem;
	box-sizing: content-box;
	background: linear-gradient(#22235b, #0e0f2c);
	border-radius: 0.2rem 0.2rem 0 0;
	text-align: center;
	position: relative;
	line-height: 1.6;
	overflow: hidden;

	.line {
		position: absolute;
		top: 16rpx;
		left: 50%;
		transform: translateX(-50%);
		width: 90rpx;
		height: 30rpx;
		background: #edeff2;
		border-radius: 20rpx;
		opacity: .2;
	}

	h1 {
		font-size: 22px;
		color: #fff;
		padding: 80rpx 0 20rpx;
		font-weight: 600;
	}

	h2 {
		font-size: 22rpx;
		color: hsla(0, 0%, 100%, .5);
		font-weight: 600;
	}

	.veriface_wrap {
		width: 660rpx;
		height: 600rpx;
		background: url(../../static/face-bg.png) no-repeat 50%;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 auto;
		position: relative;
	}

	.veriface_pic {
		position: relative;
		width: 400rpx;
		height: 400rpx;
		box-sizing: border-box;

		.face {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}

		.face_scan {
			width: 380rpx;
			height: 160rpx;
			position: absolute;
			left: 0;
			top: 160rpx;
		}
	}

	.face_pd {
		padding: 40rpx;
		font-size: 22rpx;
		font-weight: 500;
		// line-height: 22rpx;
		color: hsla(0, 0%, 100%, .5);
	}

	.upload {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 680rpx;
		height: 100rpx;
		background: linear-gradient(135deg, #00abff, #006cff);
		border-radius: 60rpx;
		font-size: 26rpx;
		font-weight: 500;
		color: #fff;
		margin: 16rpx auto 0;
		cursor: pointer;

		img {
			width: 50rpx;
			height: 50rpx;
		}
	}

	.agree_row {
		display: inline-flex;
		align-items: center;
		color: #fff;
		font-size: 28rpx;
		justify-content: center;
		margin-top: 18rpx;
		cursor: pointer;
	}
}

.list_header {
	padding: 0 30rpx;
}

.list_wrappers {
	padding: 0 30rpx;

	.list_img {
		// display: flex;
	}

	.image-container {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		grid-gap: 20rpx;
		height: 2.05rem;

		img {
			// margin-right: 10rpx;
			// margin-top: 10rpx;
			width: 100%;
			height: 100%;

		}

		.active {
			// width: 45%;
			position: relative;
		}

		.active::after {

			position: absolute;
			top: 0;
			right: 0;
			content: " ";
			width: 70rpx;
			height: 70rpx;
			border-radius: 0 10rpx;
			background: url(../../static/xiaz.png) no-repeat #000;
			background-position: center;
			background-size: 100% 100%;

		}
	}

	.image-container2 {
		display: grid;
		grid-template-columns: repeat(3, 2fr);
		grid-gap: 20rpx;
		// height: 2.05rem;

		img {
			// margin-right: 10rpx;
			// margin-top: 10rpx;
			width: 100%;
			height: 100%;

		}

		.active {
			// width: 45%;
			position: relative;
		}

		.active::after {

			position: absolute;
			top: 0;
			right: 0;
			content: " ";
			width: 70rpx;
			height: 70rpx;
			border-radius: 0 10rpx;
			background: url(../../static/xiaz.png) no-repeat #000;
			background-position: center;
			background-size: 100% 100%;

		}
	}

}

.check_btn {
	position: relative;
}

.xz.check_btn::after {
	position: absolute;
	top: 0;
	left: 0;
	content: " ";
	width: 40rpx;
	height: 40rpx;
	border-radius: 0 10rpx;
	background: url(../../static/yixuan.png)no-repeat;
	background-position: center;
	background-size: 100% 100%;

}

.check_btn::after {
	position: absolute;
	top: 0;
	left: 0;
	content: " ";
	width: 40rpx;
	height: 40rpx;
	border-radius: 0 10rpx;
	background: url(../../static/weix.png)no-repeat;
	background-position: center;
	background-size: 100% 100%;

}


.check_footer {
	position: fixed;
	bottom: 0;
	left: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	z-index: 999;
	width: 100%;

	.down-tips {
		line-height: 60rpx;
		height: 60rpx;
		background: #fff8ec;
		font-size: 24rpx;
		font-weight: 400;
		color: #ffa800;
		padding: 0 16rpx;
		text-overflow: clip;
		overflow: hidden;
		white-space: nowrap;
		width: 100%;
		box-sizing: border-box;
	}

	.d-flex {
		display: flex;
	}

	.row {
		width: 100%;
		height: 200rpx;
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		background: #fff;
		box-sizing: border-box;

		.cancel {
			display: flex;
			flex-direction: column;
			cursor: pointer;
			font-size: 26rpx;
			flex-shrink: 0;
			align-items: center;
		}

		.btn-wrap-outer {
			flex: 1;
		}

		.free-download,
		.pay-download {
			display: flex;
			flex: 1;
			position: relative;
			margin-left: 20rpx;
		}

		.pay-download {
			.btn-down {
				background: linear-gradient(270deg, #ff8d00, #ffc000);
			}

		}

		.btn-down {
			height: 100rpx;
			border-radius: 80rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			flex: 1;
			color: #fff;
			background: linear-gradient(270deg, #006cff, #00a5ff);
		}
	}
}

.WaterFall .shadow {
	position: absolute;
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, .3);
	z-index: 188;
	left: 0;
	top: 0;
}

.WaterFall {
	position: relative;
	padding: 40rpx;

	/deep/ {
		.u-dot {
			background: #006cff;
		}
	}

	.demo-warter {
		border-radius: 8px;
		margin: 5px;
		background-color: #ffffff;
		padding: 2px;
		position: relative;
	}

	.u-close {
		position: absolute;
		top: 32rpx;
		right: 32rpx;
	}

	.demo-image {
		width: 100%;
		border-radius: 4px;
	}

	.demo-title {
		font-size: 30rpx;
		margin-top: 5px;
		color: $u-main-color;
	}

	.demo-tag {
		display: flex;
		margin-top: 5px;
	}

	.demo-tag-owner {
		background-color: $u-type-error;
		color: #FFFFFF;
		display: flex;
		align-items: center;
		padding: 4rpx 14rpx;
		border-radius: 50rpx;
		font-size: 20rpx;
		line-height: 1;
	}

	.demo-tag-text {
		border: 1px solid $u-type-primary;
		color: $u-type-primary;
		margin-left: 10px;
		border-radius: 50rpx;
		line-height: 1;
		padding: 4rpx 14rpx;
		display: flex;
		align-items: center;
		border-radius: 50rpx;
		font-size: 20rpx;
	}

	.demo-price {
		font-size: 30rpx;
		color: $u-type-error;
		margin-top: 5px;
	}

	.demo-shop {
		font-size: 22rpx;
		color: $u-tips-color;
		margin-top: 5px;
	}
}
</style>